<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<!-- <title></title> -->
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<script src="/screen/js/jquery-3.7.1.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入 Element Plus 样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
		<link rel="stylesheet" href="/screen/css/regulatoryPlat.css">
		<!-- 引入 Vue 3 -->
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		<!-- 引入 Element Plus -->
		<script src="https://unpkg.com/element-plus"></script>
		<script src="/screen/js/echarts.min.js"></script>
		<script src="/screen/js/echarts-gl.min.js"></script>

	</head>

	<body>
		<div class="main" id="regulatoryPlat">
			<div class="regulatoryPlatContainer" v-cloak>
				<!-- 头部 -->
				<div class="header">
					<!-- <div class="rightH">2025年6月8日 星期二 15:48</div> -->
					<span class="text">智慧农业监管平台</span>
					<div class="rightH">晴天 最高日落：32℃   最低日落：23℃</div>
				</div>
				<!-- 内容开始 -->
				<div class="colorfulContent">
					<!-- 左边的 -->
					<div class="lectContent">
						<div class="leftItem">
							<div class="titleComm"><span>作物面积统计</span></div>
							<div id="cropArea"></div>
						</div>
						<div class="leftItem" style="margin: 2vh 0;">
							<div class="titleComm"><span>有害生物历年趋势</span></div>
							<div id="harmfulOrganisms"></div>
						</div>
						<div class="leftItem">
							<div class="titleComm"><span>常见虫害种类</span></div>
							<div id="commonInsect"></div>
						</div>
					</div>
					<!-- 中间的内容 -->
					<div class="centerContent">
						<div id="mapView" class="mapView"></div>
						<div class="mapViewtip">
							<div class="tip">良好</div>
							<div class="tip tip2">异常</div>
							<div class="tip tip3">严重</div>
						</div>
						
						<!-- 物理防控器械应用情况 -->
						<div class="preventionControl">
							<div class="titleComm"><span>物理防控器械应用情况</span></div>
							<div class="totalRightwrapper">
								<div class="tabheader">
									<div style="width: 15%;">排名</div>
									<div style="width: 25%;">设备</div>
									<div style="width: 30%;">监测类型</div>
									<div style="width: 15%;">监测类型</div>
									<div style="width: 15%;">运行状态</div>
								</div>
								<div class="scrolling-container" style="height: calc(100% - 36px);">
									<div class="scrolling-list">
										<div class="scorllitem2" v-for="(item,index) in 4" :key="index">
											<div style="width: 15%;" class="alarmcon">排名</div>
											<div style="width: 25%;" class="alarmcon">设备</div>
											<div style="width: 30%;" class="alarmcon">监测类型</div>
											<div style="width: 15%;" class="alarmcon">监测类型</div>
											<div style="width: 15%;" class="alarmcon">运行状态</div>
										</div>
									</div>
									<div class="scrolling-list">
										<div class="scorllitem2" v-for="(item,index) in 4" :key="index">
											<div style="width: 15%;" class="alarmcon">排名</div>
											<div style="width: 25%;" class="alarmcon">设备</div>
											<div style="width: 30%;" class="alarmcon">监测类型</div>
											<div style="width: 15%;" class="alarmcon">监测类型</div>
											<div style="width: 15%;" class="alarmcon">运行状态</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 右侧的内容 -->
					<div class="rightContent">
						<div class="leftItem">
							<div class="titleComm"><span>有害生物实时监测</span></div>
							<div id="harmful"></div>
						</div>
						<div class="leftItem" style="margin: 2vh 0;">
							<div class="titleComm"><span>病情趋势分析</span></div>
							<div id="trendofillness"></div>
						</div>
						<div class="leftItem">
							<div class="titleComm"><span>预警信息</span><span class="subtitle">历史记录</span></div>
							<div class="alert">
								<div class="scrolling-container">
									<div class="scrolling-list">
										<div class="scorllitem" v-for="(item,index) in 4" :key="index">
											<div class="flex_l">
												<img src="/screen/assets/images/alert.png" alt="" class="alertimg" />
												土壤温度不在温度范围内
											</div>
											<div class="time">2024-08-01 10:12:15</div>
										</div>
									</div>
									<div class="scrolling-list">
										<div class="scorllitem" v-for="(item,index) in 4" :key="index">
											<div class="flex_l">
												<img src="/screen/assets/images/alert.png" alt="" class="alertimg" />
												土壤温度不在温度范围内
											</div>
											<div class="time">2024-08-01 10:12:15</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script type="module">
			const { createApp, ref, onMounted, nextTick} = Vue;
			import { lineAreaChartFun } from "/screen/echarts/lineAreaChart.js"; //折线图区域
			import { lineBar2ChartFun } from "/screen/echarts/lineBarChart2.js"; //柱状和折线图 虚线
			import { pieChartFun } from "/screen/echarts/pie.js"; //饼图
			import { mapChartFun } from "/screen/echarts/map.js"; //地图
			let baseUrl = 'https://www.sptcg.cn/tybkapIOzW.php'
			createApp({
				setup() {
					let mapCharts
					onMounted(() => {
						nextTick(() => {
							initbasicData() //基础数据
							mapCharts = echarts.init(document.getElementById('mapView'));
							initMap()
						})
					});
					// 基础数据
					const initbasicData = (datvalue, datares) => {
						// 作物面积统计
						let pieCharts = echarts.init(document.getElementById('cropArea'));
						pieCharts.setOption(pieChartFun([
							{
								"name": "1-2小时",
								"value": 0,
								"count": 0
							},
							{
								"name": "2-3小时",
								"value": 0,
								"count": 0
							},
							{
								"name": "3-4小时",
								"value": 0,
								"count": 0
							},
							{
								"name": "4小时以上",
								"value": 0,
								"count": 0
							}
						]));
						// 有害生物历年趋势
						let harmfulOrganismsCharts = echarts.init(document.getElementById('harmfulOrganisms'));
						let datah = {
							xData: ['2020', '2021', '2022', '2023', '2024'],
							legendShow: true,
							// unit:'个',
							yData: [{
								value: [40, 45, 60, 90, 120],
								type: 'line',
								name: "报修",
								color: 'rgba(139, 209, 182, 1)'
							}, ]
						}
						harmfulOrganismsCharts.setOption(JSON.parse(JSON.stringify(lineBar2ChartFun(datah))));
						
						// 常见虫害
						
						let commonInsectCharts = echarts.init(document.getElementById('commonInsect'));
						let dataC = {
							xData: ['2020', '2021', '2022', '2023', '2024'],
							legendShow: false,
							// unit:'个',
							yData: [{
								value: [40, 45, 60, 90, 120],
								type: 'bar',
								name: "报修",
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: '#AAFFDE'
									},
									{
										offset: 1,
										color: '#002C23'
									}
								])
							}, ]
						}
						commonInsectCharts.setOption(JSON.parse(JSON.stringify(lineBar2ChartFun(dataC))));
						
						let lineBar2Charts = echarts.init(document.getElementById('harmful'));
						let data1 = {
							xData: ['2020', '2021', '2022', '2023', '2024'],
							legendShow: false,
							// unit:'个',
							yData: [{
								value: [40, 45, 60, 90, 120],
								type: 'line',
								name: "报修",
								color: 'rgba(139, 209, 182, 1)'
							}, ]
						}
						lineBar2Charts.setOption(JSON.parse(JSON.stringify(lineBar2ChartFun(data1))));
						
						
						let lineAreaCharts = echarts.init(document.getElementById('trendofillness'));
						let data = {
							xData: ['2020', '2021', '2022', '2023', '2024'],
							legendShow: true,
							// name:'单位：',
							unit: '单位：',
							color: [
								['rgba(255, 160, 108, 0.2)', 'rgba(255, 160, 108, 0.6)',
									'rgba(255, 160, 108, 1)'
								]
							],
							yData: [{
								name: "基础数据",
								value: [40, 45, 60, 90, 120],
							}]
						}
						lineAreaCharts.setOption(JSON.parse(JSON.stringify(lineAreaChartFun(data))));
					}
					
					// 地图
					const initMap = (Val) =>{
					    fetch('/screen/assets/area.json')
						.then(response => response.json())
						.then(areaData => {
							let cityname = '沙坡头区'
							let zommN = 0.76
							echarts.registerMap(cityname, areaData);
							let data1 = areaData.features.map((item) => {
							  return {
								name: item.properties.name,
							  };
							});
							
							let mapOption = mapChartFun(cityname,data1,zommN,[])
							mapCharts.setOption(mapOption, true)
						})
					}
					return {

					};
				}
			}).use(ElementPlus).mount('#regulatoryPlat');
		</script>
	</body>

</html>